<template>
	<div class="mobile_search">
		<div class="header">
			<router-link to="/mobile/home">
				<i class="el-icon-arrow-left"></i>
			</router-link>
			<form @submit.prevent="setSearch(null)">
				<input type="search" placeholder="请输入书名、作者、出版社" v-model="keywords" />
				<input type="submit" value="搜索" />
			</form>
		</div>
		<div class="ss" v-if="hlist != ''">
			<h4>历史搜索</h4>
			<button>
				<i class="el-icon-delete-solid" v-show="del == 'hide'" @click="del = 'display'"></i>
				<el-button type="text" @click="open" v-show="del == 'display'">全部删除</el-button>
				<span v-show="del == 'display'">|</span>
				<span v-show="del == 'display'" style="color: red;" @click="del = 'hide'">完成</span>
			</button>
		</div>

		<div class="history">
			<button v-for="(item,i) in hlist" :key="i">
				<span @click="setSearch(item)">
					{{item}}
				</span>
				<span v-show="del == 'display'" @click="removeOne(i)">x</span>
			</button>
		</div>

		<div class="bd">
			<div class="list">
				<header>
					<h3>热门榜单</h3>
				</header>
				<ul>
					<li v-for="(item,i) in hotlist" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`" v-if="i < 9">
							<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" v-if="i < 3" />
							<span class="xh">{{i+1}}</span>
							<span class="xh" v-if="i >= 3"
								style="background-color: rgba(212, 212, 212, 1.0);">{{i+1}}</span>
							<div style="display: flex; align-items: center; height: 100%;">
								<p>{{item.name}}</p>
							</div>
						</router-link>
					</li>
				</ul>
			</div>
			<div class="list">
				<header>
					<h3>新书榜单</h3>
				</header>
				<ul>
					<li v-for="(item,i) in newlist" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`" v-if="i < 9">
							<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" v-if="i < 3" />
							<span class="xh">{{i+1}}</span>
							<span class="xh" v-if="i >= 3"
								style="background-color: rgba(212, 212, 212, 1.0);">{{i+1}}</span>
							<div style="display: flex; align-items: center;">
								<p>{{item.name}}</p>
							</div>
						</router-link>
					</li>
				</ul>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'MobileSearch',
		data() {
			return {
				keywords: '',
				del: 'hide',
				total: 0,
				hotlist: [],
				newlist: []
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/findPageBook/0/0/0").then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/findPageBook/1/" + this.total + "/0").then(res => {
				this.hotlist = [...res.data.data.books]
				this.newlist = [...res.data.data.books]
			})
			this.hotlist.sort(function(a, b) {
				return b.salenum - a.salenum
			})
			this.newlist.sort(function(a, b) {
				let data = new Date(a.tmake).getTime()
				let data2 = new Date(b.tmake).getTime()
				return data2 - data
			})
		},
		computed: {
			...mapState('search', ['hlist']),
		},
		methods: {
			// 格式：mapActions('模块名'，['调用模块内的方法'])
			...mapActions('search', ['actionHistory']),
			setSearch( type ) {
				if(this.del != 'display') {
					if(type == null) {
						// 调用search模块的函数actionHistory，并将当前组件的data数据传递过去vuex
						this.actionHistory(this.keywords);
						this.$router.push({
							path: '/mobile/booklist',
							query: {
								title: this.keywords
							}
						})
						this.keywords = ''
					}else {
						this.$router.push({
							path: '/mobile/booklist',
							query: {
								title: type
							}
						})
					}
				}
			},
			...mapActions('search', ['removeOneHistory']),
			removeOne(x) {
				this.removeOneHistory(x);
			},
			...mapActions('search', ['removeHistory']),
			open() {
				this.$confirm('确认删除全部历史记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.removeHistory();
					this.del = 'hide'
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			}
		}
	}
</script>

<style scoped>
	.mobile_search {}

	.mobile_search .header {
		background-color: #eaeaea;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4rem;
	}

	.mobile_search .header form input[type='search'] {
		width: 14rem;
		height: 2rem;
		border-radius: 3rem;
		text-indent: 0.5rem;
		outline: none;
		border: none;
		margin-left: 2rem;
	}

	.mobile_search .header form input[type='submit'] {
		border: none;
		background-color: #eaeaea;
		font-size: 1rem;
		margin-left: 2rem;
	}

	.mobile_search .history {
		height: 9rem;
		overflow: auto;
	}

	.mobile_search .ss {
		display: flex;
		justify-content: space-between;
	}

	.mobile_search .ss h4 {
		margin-top: 0.5rem;
		margin-left: 1rem;
		margin-bottom: 0.5rem;
	}

	.mobile_search .ss button {
		border: none;
		background-color: white;
		margin-right: 1rem;
	}

	.mobile_search .ss button span {
		margin-left: 0.5rem;
	}

	.mobile_search .history button {
		margin-left: 2rem;
		border-radius: 1rem;
		border: 1px solid silver;
		margin-bottom: 0.5rem;
	}

	.mobile_search .bd {
		display: flex;
	}

	.mobile_search .bd .list {
		margin-left: 0.5rem;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		width: 55%;

	}

	.mobile_search .bd .list header {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		background: linear-gradient(135deg, #ffe9ea, white);
	}

	.mobile_search .bd .list header h3 {
		margin-left: 1rem;
	}

	.mobile_search .bd .list ul {
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

	}

	.mobile_search .bd .list ul li {
		width: 100%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 1rem;
		background-color: white;
		position: relative;
		vertical-align: middle;
		text-overflow: ellipsis;
	}

	.mobile_search .bd .list ul li a {
		display: flex;
		align-items: center;
	}

	.mobile_search .bd .list ul li img {
		width: 35%;
		height: 6rem;
		margin-top: 1rem;
	}

	.mobile_search .bd .list ul li p {
		color: black;
		padding-left: 2rem;
		height: 2rem;
	}

	.mobile_search .bd .list ul li .xh {
		font-size: 0.7rem;
		background-color: rgba(236, 184, 120, 1.0);
		position: absolute;
		top: 10%;
		left: 0;
		color: white;
		padding: 0.4rem 0.3rem;
		border-bottom-right-radius: 0.6rem;
	}

	.mobile_search .bd .list ul li h5 {
		color: #a67b5b;
	}

	.mobile_search .bd .list ul li h5 span {
		color: red;
	}
</style>